<template>
  <div class="artists">
    <ul class="list">
      <router-link tag="li" :to="{name:'artistsDetails',params:{avatar_s500:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}" v-for="(item,index) in artistsData" :key="index">
        <div class="pic">
          <img :src="item.avatar_s500" alt="">
        </div>
        <div class="name">
          <div class="name_item">{{ item.name }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name:'artists',
    data(){
      return{
        artistsArr:["2517","7994","45561","1091","245815","1077","2507","1204","1117","82366"],
        artistsData:[]
      }
    },
    props:{
      tinguid:{
        type:[String,Number],
        default:0
      }
    },
    mounted(){
      for(var i = 0;i < this.artistsArr.length;i++){
        const artistsUrl = this.HOST + '/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid=' + this.artistsArr[i]
        this.$axios.get(artistsUrl)
          .then(res => {
            this.artistsData.push({
              avatar_s500:res.data.avatar_s500,
              name:res.data.name,
              ting_uid:res.data.ting_uid
            })
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
.artists{
  width: 100%;
  height: 100%;
}

.list{
  width: 100%;
  height: 100%;
}

ul li{
  width: 100%;
  height: 100%;
  list-style: none;
  display: inline-block
}

.pic img{
  width: 20%;
  height: 20%;
  border-radius: 50%;
  padding: 10px 20px;
  float: left;
}

.name{
  width: 65%;
  height: 20%;
  float: right
}

.name_item{
  padding: 40px 0
}
</style>